<!-- 个人信息弹框 -->
<template>
  <div class="wrap">
    <a-space direction="vertical" fill>
      <header>
        <a-avatar :size="64" shape="square">
          <img
            v-if="data?.headPortrait"
            alt="avatar"
            :src="data?.headPortrait || ''"
          />
          <p v-else>{{ data?.name || '暂无' }}</p>
        </a-avatar>
        <main>
          <a-space direction="vertical">
            <div style="font-size: 16px; font-weight: 700">
              姓名:{{ data?.name || '暂无' }}
            </div>
            <div>昵称: {{ data?.nickname || '暂无' }}</div>
          </a-space>
        </main>
      </header>
    </a-space>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  // 参数说明
  defineProps<{
    visible: boolean; // 是否显示对话框
    data: any;
  }>(),
  {}
);
</script>

<style lang="less" scoped>
.wrap {
  width: 300px;
  height: 300px;
  background-color: #eee;
  padding: 20px;
  box-sizing: border-box;

  header {
    display: flex;

    main {
      margin-left: 30px;
    }
  }
}
</style>
